<template>
  <div>
      <div style="background-color: white">
        <el-row>
            <el-col :span="7" :pull="0">
                <span style="color: #606266;font-size:25px;font-weight:bold" href="#">添加业主房产（共3步：2/3）</span>
            </el-col>
            <el-col :span="5" :offset="12">
                <el-button @click="last()" icon="el-icon-caret-left">上一步</el-button>
            </el-col>
        </el-row>
  <el-row>
      <el-col :span="5">
        <a style="color: #606266" href="#">首页</a>
        <a style="color: #dcdfe6" href="#">/ 资产管理 </a>
        <a style="color: #dcdfe6" href="#">/ 楼栋信息</a></el-col
      >
    </el-row>
    </div>
    <hr />
    <el-row style="background-color: white">
        <el-col :span="3"><a style="color: #606266;font-family:'黑体';font-size:25px;font-weight:bold">选择房屋：</a></el-col> 
        <el-col :span="6"
        ><el-input
        v-model="id"
          placeholder="请输入房屋门号"
          style="margin-left: 20px"
          clearable
        >
        </el-input>
      </el-col>
      <el-col :span="5">
          <el-button @click="find()" style="margin-right:50px" type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
    </el-row>
     <template>
      <el-table :data="pagination.records" style="width: 100%">
        <el-table-column sortable prop="houseId" label="房屋编号" width="180">
        </el-table-column>
          <el-table-column prop="name" label="房屋门号" width="180">
        </el-table-column>
        <el-table-column prop="building.name" label="楼栋名称" width="180">
        </el-table-column>
        <el-table-column prop="harea" label="建筑面积" width="180">
        </el-table-column>
        <el-table-column prop="userinfo.username" label="业主姓名" width="180">
        </el-table-column>
        <el-table-column prop="hcondition" label="状态" width="180">
        </el-table-column>
        <el-table-column label="操作" align=center> 
            <template slot-scope="scope">
          <el-button size="medium" @click="xuanze(scope.row)" round>选择</el-button>
        </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>
    </template>
  </div>
</template>

<script>
export default {
data(){
    return{
        id:"",
        pagination:{}};
},
methods:{
    last(){
        this.$router.push("/yezhu/loudong");
    },
    xuanze(row){
         this.$store.dispatch("changeId",row.houseId);
         this.$router.push("/yezhu/Info");
    },
    find(page = 1, pageSize = 5){
    let url="yezhu/houseInfo";
    let params={page:page,pageSize:pageSize,id:this.id,lname:this.$store.state.loudongname};
    this.$axios.post(url,params).then(resp=>{this.pagination = resp.data.result;});
    },

      handleSizeChange(pageSize) {
      this.find(this.pagination.current, pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page) {
      this.find(page, this.pagination.size);
    }
},
mounted(){
  this.find();
}
}
</script>

<style>

</style>